import styles from './index.less'
import * as echarts from 'echarts';
import {useRef,useEffect} from 'react'
const Radar=()=>{
    const raRef=useRef()
    useEffect(()=>{
        let myChart = echarts.init(raRef.current);
        let option;

        option = {
            radar: {
                shape: 'circle',

                indicator: [
                    { text: '真人渗透'},
                    { text: 'APT' },
                    { text: '非定向\n攻击' },
                    { text: '爬虫' },
                    { text: '持续性\n威胁' },
                    { text: '其他'},
                ],
                name:{
                    textStyle: {
                        padding: [-8, -8] , // 控制文字padding
                        color: '#FFFFFF',
                        fontSize:'10px',
                        fontWeight:"normal",
                        lineHeight:12

                    }
                },
                splitArea:{
                    areaStyle:{
                        color:''
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'rgba(87, 185, 244, 0.4)',
                        width: 1
                    }
                },
                axisLabel: {
                    margin: 8,

                },
                splitLine:{
                    lineStyle:{
                        color:'rgba(87, 185, 244, 0.4)',
                        width: 1
                    }
                }
            },
            series: [
                {
                    type: 'radar',
                    symbol: "none",
                    lineStyle:{
                        color:"#73F8FA",
                        width:1
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    areaStyle: {
                        color: 'rgba(115, 248, 250, 0.2)'
                    },
                    data: [
                        {
                            value: [38, 24, 1762, 2587,126,1098],
                        }
                    ]
                },


            ]
        };

        option && myChart.setOption(option);
        window.addEventListener('resize',()=>{
            myChart.resize()
        })
    },[])
    return(
        <div className={styles.container}>
            <div  className={styles.radar} ref={raRef}/>
        </div>
    )
}
export default Radar